<template>
  <div>
    <div class="yxp-composition-top">
      <div class="back" id="yxp-commp-back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">{{title}}</div>
      <div class="yxp-top-r" v-if="type !== '8'">
        <span class="right-text-item" v-if="type === '0'" id="yxp-commp-back1" @click="handleList">训练记录</span>
        <span class="right-text-item" v-if="type === '1'" id="yxp-commp-back2" @click="handlePrint">打印</span>
        <span class="right-text-item" v-if="type !== '0' && type !== '3'"  id="yxp-commp-back3" @click="handleDetail">要点解读</span>
      </div>
      <BackTips :title="tips" :isBack="isBack" :courseId="courseId" :courseType="course_type" :type="type" @close="handleClosed"/>
    </div>
  </div>
</template>
<script>
import { printText } from '@/services/composition.js'
import BackTips from './BackTips.vue'
export default {
  name: 'TopBack',
  components: {
    BackTips
  },
  props: {
    title: {
      type: String,
      default: '选择学习词库'
    },
    type: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    },
    courseId: {
      type: Number,
      default: 0
    },
    course_type: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    if (this.type === '8' || this.type === '0') {
      this.tips = '是否退出?'
    }
  },
  data() {
    return {
      isPrint: false,
      isBack: false,
      tips: '是否退出学习？'
    }
  },
  methods: {
    handlePrint () {
      if (!this.isPrint) {
        this.isPrint = true
        setTimeout(() => {
          this.isPrint = false
        }, 60000);
        this.getPrint()
      } else {
        this.$toast('不能频繁打印哦')
      }
    },
    async getPrint () {
      let params = {
        essay_id: Number(this.id),
        type: 8
      }
      let data = await printText(params)
      if (data.code === 1) {
        this.$toast('已提交打印，请到管理平台进行打印')
      } else {
        this.$toast(data.info)
      }
    },
    handleDetail () {
      this.$emit('point', true)
    },
    handleBack () {
      this.isBack = true
      // if (this.type === '0') {
      //   this.$router.replace({
      //     path: '/composition'
      //   })
      // } else {
      //   this.$router.replace({
      //   path: '/composition/courseList',
      //   query: {
      //     id: this.courseId,
      //     course_type: this.course_type
      //   }
      // })
      // }
      
    },
    handleList () {
      this.$router.push({
        path: '/composition/list',
        query: {
          id: this.courseId,
          course_type: this.course_type
        }
      })
    },
    handleClosed (val) {
      this.isBack = val
    } 
  }
}
</script>
<style lang="less" scoped>
.right-text-item {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 20px;
  color: #27BFA3;
  margin-left: 60px;
  cursor: pointer;
}
</style>
